<template>
  <div v-if="props.teamList.length > 0">
    <van-card
      v-for="team in props.teamList"
      :desc="team.description"
      :title="team.name"
      tag="标签"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
    >
      <template #tags>
        <div>
          <van-tag v-if="team.status === 0" plain type="primary">公开</van-tag>
          <van-tag v-if="team.status === 1" plain type="primary">加密</van-tag>
          <van-tag v-if="team.status === 2" plain type="primary">私有</van-tag>
        </div>
      </template>
      <template #bottom>
        <div>
          <strong><span>最大人数:</span></strong>
          <span>{{ team.maxNum }}</span>
        </div>
        <div>
          <strong><span>过期时间:</span></strong>
          <span>{{ team.expireTime }}</span>
        </div>
        <div>
          <strong><span>创建时间:</span></strong>
          <span>{{ team.createTime }}</span>
        </div>
      </template>
      <template #footer>
        <van-button
          v-if="team.userId != userInfo.id"
          @click="handleJoin(team.id)"
          type="primary"
          plain
          size="small"
          >加入队伍</van-button
        >
        <van-button
          v-if="team.userId == userInfo.id"
          @click="updateTeam(team.id)"
          type="primary"
          plain
          size="small"
          >修改资料</van-button
        >
        <van-button @click="doquiteTeam(team.id)" type="primary" plain size="small"
          >退出队伍</van-button
        >
        <van-button
          v-if="team.userId == userInfo.id"
          @click="doDeleteTeam(team.id)"
          type="primary"
          plain
          size="small"
          >解散队伍</van-button
        >
      </template>
    </van-card>
  </div>
  <van-empty v-else description="暂无队伍" />
</template>

<script setup lang="ts">
import type { TeamType } from '@/modules/team'
import { joinTeam, quiteTeam, deleteTeam } from '@/api/team'
import { showFailToast, showSuccessToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

defineExpose({
  name: '用户卡片组件',
})
const userInfo = useUserStore().getCurrentUser()
const router = useRouter()
interface teamCardListProps {
  teamList: TeamType[]
}
const loading = ref(false)
const props = withDefaults(defineProps<teamCardListProps>(), {
  teamList: () => [] as TeamType[],
})
const emit = defineEmits(['success'])
const handleJoin = (id: number) => {
  // const params = {
  //   teamId: id
  // }
  router.push({ path: '/team/addTeam', query: { id } })
  // joinTeam(params).then(res => {
  //   const { code, data } = res
  //   if (code === 200) {
  //     showSuccessToast('加入成功')
  //   } else {
  //     showFailToast('加入失败\n' + `${res.description}`)
  //   }
  // })
}
/**
 * 更新团队
 */
const updateTeam = (id: number) => {
  router.push({
    path: '/team/updateTeam',
    query: {
      id: id,
    },
  })
}
/**
 * 退出团队
 */
const doquiteTeam = async (id: number) => {
  await quiteTeam({
    id: id,
  }).then((res) => {
    if (res?.code === 200) {
      emit('success')
      showSuccessToast('退出成功')
    } else {
      showFailToast('退出失败\n' + `${res.description}`)
    }
  })
}
/**
 * 解散团队
 */
const doDeleteTeam = async (id: number) => {
  await deleteTeam({
    id: id,
  }).then((res) => {
    if (res?.code === 200) {
      emit('success')
      showSuccessToast('解散成功')
    } else {
      showFailToast('解散失败\n' + `${res.description}`)
    }
  })
}
</script>

<style scoped>
:deep(.van-image) {
  object-fit: unset;
  height: 128px !important;
}
</style>
